<template>
  <div class="v-table-tr">
    <div @click="newRow(rowIndex)" class="v-table-tr-plus"><i class="fi fi-plus"></i></div>
    <v-table-summary ref="summaryRef"
                     :summary="voucherDetail.summary"
                     :detail="voucherDetail"
                     :rowIndex="rowIndex"/>
    <v-table-subject ref="subjectRef"
                     :subjectList="subjectList"
                     :subjectMap="subjectMap"
                     :subject="voucherDetail.subject"
                     :auxiliary="voucherDetail.auxiliary"
                     :detail="voucherDetail"
                     :rowIndex="rowIndex"/>
    <v-table-debit ref="debitRef" :detail="voucherDetail" :debit="voucherDetail.debitAmount" :rowIndex="rowIndex"/>
    <v-table-credit ref="creditRef" :detail="voucherDetail" :credit="voucherDetail.creditAmount" :rowIndex="rowIndex"/>
    <div @click="rmRow(rowIndex)" class="v-table-tr-minus"><i class="fi fi-minus"></i></div>
  </div>
</template>

<script setup>
import VTableSummary from "@components/common/VoucherTable/VTableSummary.vue";
import VTableSubject from "@components/common/VoucherTable/VTableSubject.vue";
import VTableDebit from "@components/common/VoucherTable/VTableDebit.vue";
import VTableCredit from "@components/common/VoucherTable/VTableCredit.vue";
import {inject, onMounted, provide, ref, toRefs} from "vue";

const props = defineProps(['voucherDetail', 'rowIndex', 'subjectList', 'subjectMap']);

const {voucherDetail} = toRefs(props);

provide("detail", voucherDetail)

const summaryRef = ref(null);
const subjectRef = ref(null);
const debitRef = ref(null);
const creditRef = ref(null);

const newRow = inject('newRow');
const rmRow = inject('rmRow');
const pushColInstance = inject('pushColInstance');

onMounted(() => {
  pushColInstance(props.rowIndex, {
    summary: summaryRef.value,
    subject: subjectRef.value,
    debitAmount: debitRef.value,
    creditAmount: creditRef.value
  });
})
</script>

<style scoped lang="less">
.v-table {
  &-tr {
    height: 70px;
    border-bottom: @border;
    display: flex;
    position: relative;

    &:last-child {
      border-bottom: none;
    }

    &-plus, &-minus {
      display: none;
      position: absolute;
      font-size: 18px;
      cursor: pointer;
      padding-top: 18px;
      padding-bottom: 18px;
      height: 50px;
    }

    &-plus {
      left: -20px;
      color: @green-color;
      padding-right: 5px;
    }

    &-minus {
      right: -20px;
      color: @red-color;
      padding-left: 5px;
    }

    &:hover {
      background-color:#f8f8f9;

      .v-table-tr-plus, .v-table-tr-minus {
        display: inline-block;
      }
    }
  }
}
</style>
